<template>
    <div class="container-wrapper">
        <div class="account-wrapper">
            <div class="warn-wrapper" v-show="showWarning && from != 0">
                <i class="iconfont icon-remand warn-txt iconfont"></i>
                <span class="warn-txt">账户余额少于广告预算，为了不影响您的广告正常投放，请到Google平台上进行充值。</span>
            </div>
            <div class="account">
                <div class="item">
                    <div class="item-wrapper">
                        <div class="item-detail" :class="{spend: from==0?true:false}"><i class="iconfont icon-casted"></i><em>¥</em> <span>{{effectiveGoogleInfo.spend.toFixed(2) || 0.00}} </span></div>
                    </div>
                    <div class="item-desc" v-show="from != 0">已花费</div>
                    <div class="item-desc" v-show="from == 0">已花费（{{showTime}}）</div>
                </div>
                <a href="https://adwords.google.com/um/Billing/Home" target="_blank">
                    <div class="btn_common_yellow btn_common_small btn-recharge" v-show="from != 0">
                        <span>充值</span>
                    </div>
                </a>
                <span class="txt-tip" v-show="from != 0">
                    请先在同一个浏览器登录
                    <a href="http://www.adwords.google.com" target="_blank">
                        <em> Google Adwords</em>
                    </a>
                    账号，并切换要充值的账户</span>
            </div>
        </div>
        <loading :showLoading="showLoadingProps"  v-show="showLoading" />
    </div>
</template>

<script>
    import {MANAGE_EFFEGOOGLR_CTIVE_INFO} from '../../../store/mutation-types/manager/index'
    import { isInteger } from '~/assets/js/global'
    import { mapGetters } from 'Vuex'
    import loading from '~/components/loading.vue';
    export default{
        data(){
            return {
                showLoading : false,
                showWarning: false,
                isSpend: false
            }
        },
        props:{
            'from': {
                default: 1
            },
            'showTime':{
                default: '近七天'
            },

            'showLoadingProps' : {
                default: false
            }
        },
        methods: {
            getEffective() {
                if(this.showLoadingProps){
                    this.showLoading = true;
                }
                var dateFlag;
                if(this.from == 0){
                    dateFlag = 'LAST_7_DAYS'
                }else {
                    dateFlag = ''
                }
                this.$store.dispatch('getGoogleEffective',{dateFlag: dateFlag})
                    .then(response => {
                        if(this.showLoadingProps){
                            this.showLoading = false;
                        }
                        if(response.data.code == 1){
                            let result = response.data;
                            if(result && result.data){
                                this.showWarning = result.data.isPayInfo;
                                this.$store.commit('MANAGE_EFFEGOOGLR_CTIVE_INFO' , {managerGoogleEffectiveInfo : result.data || {}})
                            }
                        }
                    }).catch(()=>{
                        if(this.showLoadingProps){
                            this.showLoading = false;
                        }
                    })
            }
        },
        components: {
          loading
        },
        computed : {
            ...mapGetters({
                'effectiveGoogleInfo': 'getManagerGoogleEffectiveInfo'
            })
        },
        created() {
            this.getEffective();
        }

    }
</script>

<style scoped lang="scss">
    .container-wrapper {
        position: relative;
        max-width: 1200px;
        margin: 15px auto 0 auto;

    .account-wrapper {
        border: 1px solid #EAEEF0;
        border-radius: 4px;
    .warn-wrapper {
        height: 32px;
        background: #FFFAEA;
        border-radius: 4px 4px 0 0;
    .icon-remand {
        margin: 0 5px 0 10px;
    }
    .warn-txt {
        font-size: 12px;
        color: #FFB100;
        letter-spacing: 0;
        line-height: 32px;
        float: left;
    }
    }
    .account {
        height: 120px;
        background: #fff url('../../../assets/img/spend-bg.png') left bottom no-repeat;
        background-size: 50px 50px;
        border-radius:4px;
    .item {
        float: left;
        margin-top: 25px;
        padding: 0 100px 0 40px;
        height: 70px;
    .icon-account-balance , .icon-casted{
        float: left;
        color: #0686F9;
        margin-right: 10px;
        font-size:16px;
    }
    .item-wrapper {
        float: left;
        height: 40px;
        padding-top: 15px;
    .item-detail {
        width: 100%;
        float: left;
        font-size: 22px;
        color: #333333;
        letter-spacing: 0;
        margin-bottom: 5px;
    &.spend{
         display:inline-block;
         margin-top:-13px;
         color:#ff3526;
    em {
        margin-right: 10px;
        margin-top:-5px;
    }
    span{
        font-size:40px;
        display:inline-block;
    }
    .iconfont {
        margin-top: 20px !important;
    }
    }
    }
    }
    .item-desc {
        width: 100%;
        font-size: 12px;
        color: #999999;
        margin-left: 30px;
        display: inline-block;
        letter-spacing: 0;
    }
    }
    .txt-tip{
        line-height: 120px;
        margin-left: 30px;
        color: #666;
        em {
            color: #0686f9;
            cursor: pointer;
        }
    }
    .btn-recharge{
        float: left;
        margin-top: 45px;
    span {
        color: #fff !important;
    }
    }
    em {
        margin-right: 7px;
        font-style:normal;
        display:inline-block;
    }
    }
    }
    }
</style>